import React, { useEffect } from 'react'
import style from './cardEmployeeSmall.module.scss'
import { IEmployee, IProjectManager, } from '../../../starter/model/interfaces'
import {useDrag} from 'react-dnd'
import PersonContactSet from '../PersonContactSet/PersonContactSet'
import { EditOutlined } from '@ant-design/icons'
import { Button, ButtonProps } from 'antd'
import { store } from '../../../starter/redux/store'
import CreateProject from '../CreateProject/CreateProject'
import { useActions } from '../../../starter/hooks/actions'
import { useUpdateEmployeeMutation } from '../../../starter/api/employeesApi'
import CreateEmployee from '../CreateEmployee/CreateEmployee'

type TCardEmployee = {
  employee: IEmployee
}
export default function CardEmployeeSmall ({ employee }: TCardEmployee) {
  const [updateEmployee, {isLoading: isLoadingUpdateEmployee, isSuccess: isSuccessUpdateEmployee, isError: isErrorUpdateEmployee}] = useUpdateEmployeeMutation()
  const {setTmpEmployee, onShowModal, setModalData} = useActions()

  useEffect(() => {

  }, [isErrorUpdateEmployee])

  useEffect(() => {
    if (isSuccessUpdateEmployee) {
      onShowModal(false)
    }
  }, [isSuccessUpdateEmployee])

  const [monitor,employeeRef] = useDrag({
    type: 'employee-small',
    item: employee,
    collect: monitor => monitor
  })


  const editEmployee = () => {
    onShowModal(true)
    setTmpEmployee({...employee})
    const buttonSet : ButtonProps[] = [
      {
        type: 'primary',
        onClick: () => {
          const {employee} = {...store.getState().tmp}
          if (employee) {
            updateEmployee(employee)
          }
        },
        children: 'Ok'
      },
      {
        onClick: () => onShowModal(false),
        children: 'Cancel'
      }
    ]
    setModalData({
      title: 'Введите данные проекта',
      content: <CreateEmployee type={'employee'}/>,
      buttonSet,
      footer: buttonSet.map((item, index) => <Button key={index} {...item}/>)
    })
  }
  return (
    <div
      className={style.wrapper}
      ref={employeeRef}
    >
      <div className={style.title}>
        <div>{employee.firstName} {employee.lastName}</div>
        <EditOutlined style={{cursor: 'pointer'}} onClick={() => {editEmployee()}}/>
      </div>

      <PersonContactSet person={employee}/>
    </div>
  )
}
